<template>
	<view>
		<MyTopNav></MyTopNav>
		<view class="bg-white padding-lr-lg ">
			<el-row>
				<el-col :span="4">
					<MySideBar></MySideBar>
					<MyRank></MyRank>
				</el-col>
				<el-col :span="16" class="padding-left-xl padding-top-lg">
					<view >
						<view class="padding-tb">
							<el-breadcrumb separator-class="el-icon-arrow-right">
							  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
							  <el-breadcrumb-item>{{categoryName}}</el-breadcrumb-item>
							</el-breadcrumb>
						</view>
						<view class="">
							<!-- 学科章节信息 -->
							<uni-collapse accordion>
								<uni-collapse-item v-for="(subject, index) in chapterData" :key="index">
									<template v-slot:title>
										<view>
											<view class="cu-list menu ">
												<view class="cu-item ">
													<view class="content text-bold">
														{{subject.name}}
													</view>
													<view class="action text-grey text-right " style="width: 120rpx;">
														{{subject.num}} / {{subject.total}}
														<view class="cu-progress round sm striped">
															<view class="bg-blue" :style="[{ width: subject.rate + '%'}]"></view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</template>
									<view class="content">
										<view class="cu-list menu padding-left">
											<view class="cu-item arrow" v-for="(chapter, cindex) in subject.chapter" :key="cindex"
												@click="gotoChapterQuestion(chapter, subject.name)">
												<view class="content ">
													{{chapter.name}}
												</view>
												<view class="action text-grey">
													{{chapter.num}} / {{chapter.total}}
													<view class="cu-progress round xs">
														<view class="bg-blue" :style="[{ width: chapter.rate + '%'}]"></view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</uni-collapse-item>
							</uni-collapse>
						</view>
					</view>
					<view class="bg-white padding-xl margin-top" v-if="chapterData.length == 0">
						<u-empty mode="data" text="暂无题库数据,请重新选择"></u-empty>
					</view>
				</el-col>
				<el-col :span="4" class="padding-left-xl padding-top-lg text-center align-center">
					<view class="cu-bar bg-white solid-bottom">
						<view class="action">
							<text class="cuIcon-titles text-blue"></text>学习情况
						</view>
					</view>
					<el-row type="flex" class="row-bg" justify="center">
					  <el-col :span="12">
						  <view class="margin-top" >
						  	<arprogress :percent="answerData.answerRate">
						  		<view class="text-center">
						  			<view>{{answerData.answerRate}}%</view>
						  			<view>学习进度</view>
						  		</view>
						  	</arprogress>
						  </view>
					  </el-col>
					</el-row>
					<view  style="width: 100%;">
						<view class="grid col-3 padding-top text-gray">
							<view class=" text-center solids-right  " >
								<view class="text-df">题库</view>
								<view class="text-df ">{{answerData.questionNum}} 道</view>
							</view>
							<view class=" text-center solids-right " >
								<view class="text-df ">已学</view>
								<view class="text-df ">{{answerData.answerNum}} 道</view>
							</view>
							<view class=" text-center" >
								<view class="text-df ">得分</view>
								<view class="text-df ">{{answerData.answerYesNum}} 分</view>
							</view>
						</view>
					</view>
					<view class=" text-df text-grey margin-top-xl">
						总学习人数：{{answerData.answerUserNum}}人
					</view>
				</el-col>
			</el-row>
		</view>
		
		<MyFooter />
	</view>
</template>

<script>
	
	import { qbmsChapterData, qbmsCategoryAnswerData } from '@/api/qbms.js'
	import arprogress from '../../components/ar-circle-progress/index.vue'
	
	export default {
		data() {
			return {
				categoryId: 0,
				categoryName: "",
				chapterData: [], // 章节数据
				
				answerData: {
					questionNum: 0,
					answerNum: 0,
					answerYesNum: 0,
					answerUserNum: 0,
					answerRate: 0,
				}, // 答题数据
			}
		},
		components: {
			arprogress
		},
		onLoad(options) {
			this.categoryId = options.categoryId;
			this.categoryName = options.name;
		},
		onShow() {
		
			this.getChapterData();
			this.getAnswerData();
			
		},
		
		methods: {
			/** 获取答题数据 */
			getAnswerData() {
				qbmsCategoryAnswerData({
					categoryId: this.categoryId
				}).then(res => {
					this.answerData = res.data;
				}).catch(err => {
					
				})
			},
			/** 获取章节数据 */
			getChapterData() {
				qbmsChapterData({
					categoryId: this.categoryId
				}).then(res => {
					this.chapterData = res.data;
				}).catch(err => {});
			},
			
			/** 跳转章节题目 */
			gotoChapterQuestion(chapter, subjectName) {
				uni.$u.route({
					url: "/pages/qbms/practice",
					params: {
						chapterId: chapter.id,
						chapterName: chapter.name,
						subjectName: subjectName,
					}
				})
			},
		}
	}
</script>

<style>

</style>
